<template>
	<view v-if="show">
		<view class="address" v-if="detail.delivery_method == 0">
			<view class="address-left">
				<view class="address-img">
					<image src="../../../../static/icon/address_location.png" mode=""></image>
				</view>
				<view class="address-info">
					<view class="info-upper">
						{{ detail.address.name }} <text>{{ detail.address.phone }}</text>
					</view>
					<view class="info-lower">
						{{ detail.address.Area.province }}{{ detail.address.Area.city }}{{ detail.address.Area.region }}
						{{ detail.address.detail }}
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<template v-if="detail.pay_status == 20">
				<view class="code">
					核销码：<text class="text-red">{{ detail.redeem_code }}</text>
				</view>
			</template>
		</view>

		<view class="product">
			<view class="product-li" v-for="(item,index) in detail.goods" :key="index">
				<view class="li-left">
					<image :src="item.spec.spec_image==''? item.image:item.sku_image" mode="scaleToFill"></image>
				</view>
				<view class="li-right">
					<view class="lir-upper">
						<view class="name text-cut">
							{{ item.goods_name }}
						</view>
						<view class="price">
							￥{{ item.goods_price }}
						</view>
					</view>
					<view class="lir-lower">
						<view class="nums">
							{{ item.goods_attr ? item.goods_attr :'' }}
						</view>
						<view class="nums">
							x{{ item.total_num }}
						</view>
					</view>
					<view class="lir-refund"
						v-if="(detail.order_status == 10 && detail.pay_status == 20 && detail.freight_status == 10 && detail.receipt_status == 10) || (detail.order_status == 10 && detail.pay_status == 20 && detail.freight_status == 20 && detail.receipt_status == 10) || item.refund_status > 0">
						<view class="refund-btn" @click="refundClick(item,0)" v-if="item.refund_status == 0">
							退款
						</view>
						<view class="refund-btn" @click="refundClick(item,1)" v-else>
							售后详情
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="item m-t-30">
				<view class="text">
					订单状态
				</view>
				<view class="price">
					{{ detail.status_text }}
				</view>
			</view>
			<view class="item m-t-30">
				<view class="text">
					配送方式
				</view>
				<view class="price">
					{{ detail.delivery_method == 0 ? '快递邮寄' : '门店自提' }}
				</view>
			</view>

			<view class="item">
				<view class="text">
					运费
				</view>
				<view class="price">
					￥{{ detail.express_price }}
				</view>
			</view>

			<view class="item">
				<view class="text">
					商品总价
				</view>
				<view class="price">
					￥{{ detail.total_price }}
				</view>
			</view>
			
			<view class="item" v-if="detail.coupon_money > 0">
				<view class="text">
					优惠金额
				</view>
				<view class="price">
					-￥{{ detail.coupon_money }}
				</view>
			</view>

			<view class="item">
				<view class="text">
					实付款
				</view>
				<view class="price text-red">
					￥{{ detail.pay_price }}
				</view>
			</view>
			<view class="line m-t-30"></view>
			<view class="item m-t-30">
				<view class="text">
					订单编号
				</view>
				<view class="price">
					{{ detail.order_no }} <text @click="copy">复制</text>
				</view>
			</view>

			<view class="item">
				<view class="text">
					创建时间
				</view>
				<view class="price">
					{{ detail.creattime_text }}
				</view>
			</view>

			<template v-if="detail.freight_time!=0">
				<view class="item">
					<view class="text">
						发货时间
					</view>
					<view class="price">
						{{ detail.freight_time_text }}
					</view>
				</view>

				<view class="item">
					<view class="text">
						快递公司
					</view>
					<view class="price">
						{{ detail.express_company }}
					</view>
				</view>

				<view class="item">
					<view class="text">
						快递单号
					</view>
					<view class="price">
						{{ detail.express_no }}
					</view>
				</view>
			</template>

			<view class="buttom">
				<view class="btns">
					<view class="btn btn-white" @click="cancelOrder"
						v-if="detail.pay_status == 10 && detail.order_status == 10">
						取消订单
					</view>

					<view class="btn btn-black" @click="payOrder"
						v-if="detail.pay_status == 10 && detail.order_status == 10">
						支付订单
					</view>

					<view class="btn btn-black" @click="confirmOrder"
						v-if="detail.pay_status == 20 && detail.order_status == 10 && detail.freight_status == 20 && detail.receipt_status == 10">
						确认收货
					</view>

					<view class="btn btn-black" @click.stop="evaluateOrder"
						v-if="detail.evaluate_status == 0 && detail.pay_status == 20 && detail.order_status == 30 && detail.freight_status == 20 && detail.receipt_status == 20">
						评价
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				detail: {},
				show: false
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				let _this = this

				uni.showLoading({
					title: '加载中...',
					mask: true
				})

				_this.$api.get('mall.order/detail', {
					id: _this.id
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.detail = res.data.order
						_this.show = true
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							cancelText: '',
							confirmText: '确认',
							success: res => {
								uni.navigateBack({
									delta: 1
								});
							},
							fail: () => {},
							complete: () => {}
						});
					}
				}, fail => {})
			},
			cancelOrder() {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...',
								mask: true
							})
							_this.$api.post('mall.order/cancel', {
								id: _this.detail.id
							}).then(res => {
								uni.hideLoading()
								_this.toast(res.msg)
								if (res.code == 1) {
									_this.detail.order_status = 20
									_this.detail.status_text = '已取消'
								}
							}, fail => {})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			payOrder() {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确定付款吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '支付中...'
							})

							_this.$api.post('mall.order/order_pay', {
								id: _this.detail.id
							}).then(res => {
								if (res.code == 1) {
									_this.pay(res.data)
								} else {
									_this.toast(res.msg)
								}
							}, fail => {})
						}
					},
					fail: () => {},
					complete: () => {}
				});

			},
			pay(Rdata) {
				let _this = this

				uni.requestPayment({
					provider: 'wxpay',
					nonceStr: Rdata.nonceStr, // 随机字符串
					package: Rdata.package, // 固定值
					timeStamp: Rdata.timestamp, // 时间戳（单位：秒）
					signType: Rdata.signType,
					paySign: Rdata.paySign, // 签名，这里用的 MD5/RSA 签名
					success: res => {
						uni.showModal({
							title: '提示',
							content: '支付成功',
							showCancel: false,
							cancelText: '',
							confirmText: '确认',
							success: res => {
								_this.detail.pay_status = 20
								_this.detail.status_text = '待发货'
							},
							fail: () => {},
							complete: () => {}
						})
					},
					fail: (res) => {
						_this.toast('支付失败')
					},
					complete: () => {}
				});
			},
			confirmOrder() {
				let _this = this

				uni.showModal({
					title: '提示',
					content: '确定收货吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...',
								mask: true
							})
							_this.$api.post('mall.order/finish', {
								id: _this.detail.id
							}).then(res => {
								uni.hideLoading()
								_this.toast(res.msg)
								if (res.code == 1) {
									_this.detail.order_status = 30
									_this.detail.receipt_status = 20
									_this.detail.status_text = '已完成'
								}
							}, fail => {})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			copy() {
				uni.setClipboardData({
					data: this.detail.order_no
				});
			},
			refundClick(item, type) {
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/user/mall/refund/detail?id=' + item.refund_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/mall/refund/refund?id=' + item.id
					})
				}
			},
			evaluateOrder() {
				uni.navigateTo({
					url: '/pages/user/mall/order/evaluate?id=' + this.detail.id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 250rpx;
	}

	.m-t-30 {
		margin-top: 30rpx;
	}

	.line {
		height: 2rpx;
		background-color: #F0F0F0;
	}

	.text-red {
		color: #F73830 !important;
	}

	.text-cut {
		overflow: hidden;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.address {
		margin-top: 26rpx;
		background-color: #FFFFFF;
		padding: 26rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.address-left {
			width: 100%;
			padding-right: 10rpx;
			display: flex;
			align-items: center;

			.address-img {
				width: 64rpx;
				height: 64rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.address-info {
				margin-left: 20rpx;

				.info-upper {
					font-weight: 800;
					font-size: 32rpx;
					color: #060606;

					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #8A8A8A;
						margin-left: 12rpx;
					}
				}

				.info-lower {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					margin-top: 6rpx;
				}
			}
		}

		.address-right {
			.address-choose-btn {
				width: 140rpx;
				height: 54rpx;
				border-radius: 28rpx;
				border: 2rpx solid #DCDCDC;
				font-weight: 400;
				font-size: 24rpx;
				color: #060606;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.code {
		margin-top: 26rpx;
		background-color: #FFFFFF;
		padding: 50rpx 32rpx;
		font-size: 32rpx;
		font-weight: 800;
	}

	.product {
		background: #FFFFFF;
		margin-top: 24rpx;
		padding: 26rpx 36rpx 32rpx 36rpx;

		.product-li {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			margin-bottom: 32rpx;

			.li-left {
				width: 161rpx;
				height: 161rpx;				

				image {
					width: 161rpx;
					height: 161rpx;
					border-radius: 10rpx;
				}
			}

			.li-right {
				width: calc(100vw - 161rpx);
				padding-left: 26rpx;
				height: 161rpx;

				.lir-upper {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-weight: 800;
						font-size: 32rpx;
						color: #010101;
					}

					.price {
						font-weight: 800;
						font-size: 28rpx;
						color: #000000;
					}
				}

				.lir-lower {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 8rpx;

					.nums {
						font-weight: 400;
						font-size: 28rpx;
						color: #8A8A8A;
					}
				}

				.lir-refund {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.refund-btn {
						height: 48rpx;
						background-color: #FFFFFF;
						border-radius: 100rpx;
						border: 1rpx solid #999999;
						opacity: 0.8;
						font-size: 24rpx;
						color: #666666;
						padding: 0 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}



		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 26rpx;

			.text {
				font-weight: 800;
				font-size: 32rpx;
				color: #010101;

				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #8A8A8A;
					margin-left: 16rpx;
				}
			}

			.price {
				font-weight: 400;
				font-size: 28rpx;
				color: #8A8A8A;

				text {
					color: #000000;
					margin-left: 20rpx;
				}
			}
		}

		.buttom {
			padding-top: 26rpx;

			.pay-price {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;

				text {
					font-weight: 800;
					font-size: 32rpx;
					color: #F73830;
				}
			}

			.btns {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-top: 24rpx;

				.btn {
					border-radius: 32rpx;
					font-weight: 800;
					font-size: 24rpx;
					padding: 16rpx 28rpx;
					margin-left: 46rpx;
				}

				.btn-white {
					border: 2rpx solid #000000;
					background: #FFFFFF;
					counter-reset: #000000;
				}

				.btn-black {
					color: #FFFFFF;
					background: #000000;
				}
			}
		}
	}
</style>